<script setup>
import { CloseBold, FullScreen, SemiSelect } from '@element-plus/icons-vue'

const props = defineProps({
  disables: {
    type: Array,
    default: () => [],
  },
})

const emit = defineEmits(['windowMini', 'windowFull', 'windowClose'])

function windowMini() {
  emit('windowMini')
}

function windowFull() {
  emit('windowFull')
}

function windowClose() {
  emit('windowClose')
}
</script>

<template>
  <div class="window-overlay">
    <div class="btn" v-if="!props.disables.includes('mini')" @click="windowMini">
      <el-icon><SemiSelect /></el-icon>
    </div>
    <div class="btn" v-if="!props.disables.includes('max')" @click="windowFull">
      <el-icon><FullScreen /></el-icon>
    </div>
    <div class="btn" v-if="!props.disables.includes('close')" @click="windowClose">
      <el-icon><CloseBold /></el-icon>
    </div>
  </div>
</template>

<style scoped lang="scss">
.window-overlay {
  @include use-flex(center, flex-end);
  position: absolute;
  height: 30px;
  width: 100%;
  z-index: 4;
  padding-right: var(--elp-border-radius-16);
  -webkit-user-select: none;
  .btn {
    @include use-flex(center, center);
    cursor: pointer;
    padding: 5px 10px;
    &:hover {
      background-color: var(--elp-color-info-light-8);
    }
  }
}
</style>
